<template>
  <div>
    <van-search
      v-model="title"
      placeholder="请输入搜索关键词"
      wrap-with-form
      show-action
      @search="onSearch"
    />

    <van-card
      v-for="(v, i) in list"
      :key="i"
      :num="v.goods_number"
      :price="v.goods_price"
      :title="v.goods_name"
      :thumb="
        v.goods_small_logo
          ? v.goods_small_logo
          : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
      "
    />
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { searchApi } from "@/api/api";
import _ from "lodash";
const router = useRouter();
const route = useRoute();
const title = ref("");

title.value = route.query.name;

const list = ref([]);

const searchFun = () => {
  searchApi(title.value).then((res) => {
    list.value = res.data.message.goods;
  });
};
searchFun();
const onSearch=()=>{
    searchFun()
}
watch(
  title,
  _.debounce(() => {
    searchFun();
  }, 1000)
);
</script>

<style lang="scss" scoped></style>
